<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#cont{
			margin: 100px auto;
			width: 400px;
			height: 400px;
			border: 1px solid aqua;
			position: relative;
			overflow: hidden;
			background-image: url('./steel.jpg');
		}
		#main{
			width: 400px;
			height: 400px;
			position: relative;
			top: -100px;
		}
		.row{
			height: 100px;
		}
		.row div{
			width: 98px;
			height: 98px;
			border: 1px solid lime;
			float: left;
		}
		.black{
			background-image: url('./mn.png');
		}
		body{
			color: fuchsia;
			text-align: center;
			background-image: url('./PLMM.jpg');
		}

	</style>
</head>
<body>
	<h1>别踩白块:动态创建</h1>
	<h2 id="sc">0</h2>
	<div id="cont">
		<div id="main"></div>
	</div>
</body>
<script type="text/javascript">
	var main = document.getElementById('main');
	var clock = null;
	var state = true;
	var speed = 2;

	function getStyle(el, attr){
		return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el,null)[attr];
	}

	function cDiv(className){
		var div = document.createElement('div');
		if(className){
			div.className = className;
		}
		return div;
	}

	function cRow(){
		var ind = Math.floor(Math.random()*4);
		var row = cDiv('row');
		for(var i=0; i<4; i++){
			if(i == ind){
				row.appendChild(cDiv('black'));
			}else{
				row.appendChild(cDiv());
			}
		}

		if(main.firstChild){
			main.insertBefore(row, main.firstChild);
		}else{
			main.appendChild(row);
		}
	}

	function init(){
		for(var i=0; i<4; i++){
			cRow();
		}

		main.onclick = function(ev){
			ev.target = ev.target || ev.srcElement;

			if(state == flase){
				alert('重开一局');
			}else if(ev.target.className == ''){
				fail();
			}else{
				var score = document.getElementById('sc');
				var sc = parseInt(score.innerHTML) + 1;
				score.innerHTML = sc;
				if(sc % 10 == 0){
					speed += 1;
				}
				ev.target.className = '';
				ev.target.parentNode.pass = true;
			}
		}
		var clock = window.setInterval('move();',40);
	}

	init();

	function move(){
		var top = getStyle(main,'top');
		top = parseInt(top) + speed;
		main.style.top = top + 'px';

		if(top > 0){
			cRow();
			main.style.top = '-100px';
		}

		if(main.children.length >= 5){
			main.removeChild(main.children[3]);
		}

		if(main.lastchild.pass == undefined){
			fail();
		}
	}

	function fail(){
		clearInterval(clock);
		state = false;
		alert('输了');
	}
</script>
</html>